<script setup lang="ts">
import { router } from './router'
function goToHome():any{
  router.replace('/')
}
function getToLiveRoomDMMsg(){
  router.replace('/dmMsg')
}
function goToRehister(){
  router.replace('/getAcc')
}
</script>

<template>
  <div class="dhl">
    <div class="loginCss" @click="goToRehister()">
      登陆
    </div>
    <p @click="goToHome()">首页</p>
    <p @click="getToLiveRoomDMMsg()">直播间弹幕信息</p>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>

<style lang="less">
.dhl{
  display: flex;
  p{
    margin-right: 20px;
    cursor: pointer;
  }
  .loginCss{
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: skyblue;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.5s;
    &:hover{
      /*
      (a,b,c,d,e,f)
      e是x轴的平移。
      f是y轴的平移。
      a是x轴对的缩放，以倍数的方式控制。
      d是y轴对的缩放，以倍数的方式控制。
      a，b，c，d是共同控制旋转角度的，以cosθ，sinθ，-sinθ，cosθ的方式共同控制,bc处是sinθ-sinθ就是顺时针旋转
      */
      /*transform: matrix(1.5,1.5,-0.5,5,5);*/
      /*transform: translateY(20px);
      transform: scale(1.5);*/
      transform: scale(1.5) translate3d(20px,20px,0);
    }
  }
}
</style>
